<!DOCTYPE html>
<html>

<head>
    <title>我的消息</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/message.css" />
    <link rel="stylesheet" href="/css/strategy.css" />
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            /*var user = JSON.parse(sessionStorage.getItem('user'));
            $.get('/systemMessages/'+user.id,function (data) {
                console.log(data);
                $('.systemMsg').renderValues(data,{
                    getHref:function (item,value) {
                        var href = $(item).data('href');
                        $(item).attr('href',href+value);
                    }
                });
            });*/

            var page=$('#currentPage');
            var pages ;
            var travelArr = [];
            var user = JSON.parse(sessionStorage.getItem("user"));
            function send() {
                $.get('/systemMessages/'+user.id,{currentPage:page.val(),pageSize:10},function (data) {
                    $('.systemMsg').renderValues(data,{
                        getHref:function (item, value) {
                            var href = $(item).data('href');
                            $(item).attr('href',href+value);
                        }
                    });
                    page.val(parseInt(page.val())+1);
                    pages = data.pages;
                });
            }
            send();
            $(window).scroll(function () {
                if ($(document).scrollTop()+$(window).height()>=$(document).height()){
                    if (page.val() <= pages){
                        send();
                    }else {
                        $(document).dialog({
                            type : 'notice',
                            infoText: '已经到底啦！',
                            autoClose: 1500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });

        })
    </script>
    <style>
        .template{
            background-color: #f0f0f0;
            height: 10px;
        }
        .marginAll{
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <input type="hidden" name="currentPage" id="currentPage" value="1">
    <div class="search-head">
        <div class="row nav-search">
            <div class="col">
                <a href="javascript:history.go(-1);">
                    <span><i class="fa fa-chevron-left"></i></span>
                </a>
            </div>
            <div class="col">
                <span style="font-size: 20px">系统消息</span>
            </div>
            <div class="col"></div>
        </div>
    </div>
    <div class="template"></div>
    <div class="systemMsg">
        <div render-loop="list">
            <div>
                <div class="row marginAll" >
                    <div class="col-2">
                        <img src="/icon/systemMsg.png" width="50px" height="50px">
                    </div>
                    <div class="col-10 ">
                        <div class="row">
                            <div class="col-6">
                                <h5 style="font-weight: bold; font-size: 20px">系统消息</h5>
                            </div>
                            <div class="col-6">
                                <span style="font-size: 10px" render-html="list.createTime"></span>
                            </div>
                        </div>
                        <a data-href="/travelContent.html?id=" render-key="list.travel_id" render-fun="getHref">
                            <span style="font-size: 18px" render-html="list.content"></span>
                        </a>
                    </div>
                </div>
                <hr class="marginAll"/>
            </div>
        </div>
    </div>
</body>
</html>